<template>
  <div class="ripple-container" :class="{ 'check-disable': checkDisabled, shake: color }">
    <!-- <div class="static-circle" /> -->
    <div :class="{ ripple: !isFake, fake: isFake }" :style="{ backgroundColor: props.color }" />
  </div>
</template>

<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    checkDisabled?: boolean;

    color?: string;
    isFake?: boolean;
  }>(),
  {
    checkDisabled: false,
    isTriangle: false,
    color: "",
    isFake: false
  }
);
</script>
<style lang="scss" scoped>
.ripple-container {
  position: relative;
  width: 24px; /* Container size (matching the maximum ripple size) */
  height: 24px;
  pointer-events: none;
}

.static-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px; /* Permanent center circle */
  height: 50px;
  background: rgb(246 59 59 / 80%); /* Solid color */
  border-radius: 50%;
  transform: translate(-50%, -50%); /* Center the circle */
}

.ripple {
  position: absolute;
  top: -120%;
  left: 80%;
  width: 50px; /* Initial size of the ripple */
  height: 50px;
  background: rgb(246 59 59 / 50%); /* Fading color for ripple */
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: ripple-effect 2s infinite;
}

.static-triangle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0; /* 宽度设置为0，因为三角形的宽度不是必需的 */
  height: 0; /* 高度设置为0，因为三角形的高度不是必需的 */
  border-right: 5px solid transparent; /* 右侧边框，透明 */
  border-bottom: 8px solid rgb(59 130 246 / 70%); /* 底部边框，设置为所需的颜色 */
  border-left: 5px solid transparent; /* 左侧边框，透明 */
  transform: translate(-50%, -50%); /* 将三角形中心对齐 */
}

.check-disable {
  cursor: not-allowed !important;
}

.pmd-img {
  position: absolute;
  top: 3px;
  left: 7px;
  width: 10px;
  height: 20px;
}

@keyframes ripple-effect {
  0% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1); /* Start at 50px */
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2); /* Grow to 24px */
  }
}

.shake {
  transform: translateZ(0); /* 强制GPU加速 */
  animation: shake 0.5s ease infinite;
  backface-visibility: hidden; /* 避免动画闪烁 */
}
</style>
